<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    输入行数：<input type="text" id="row" />
    输入列数：<input type="text" id="column" />
    <button id="btn">点击</button>
    <script>
        // 二层 循环


        // 绘制5个 *


        // for(var j=1;j<=5;j++){  //控制的行数 
        //     for(var i=1;i<=5;i++){  //控制列数 
        //          document.write("*")
        //     }
        //     document.write("<br>");
        // }



        // 双层循环执行顺序 ；
        // for(var i=0;i<3;i++){
        //     console.log("外层循环打印",i);
        //     for(var j=0;j<3;j++){
        //         console.log("内层循环打印",j);
        //     }
        // }

        /* 
            外层循环  ：
                外层第一次  ：
                        打印  "外层循环打印" 0
                        内层循环 
                            内层循环第一个  ：内层循环打印 0
                            内层循环第二个  ：内层循环打印 1
                            内层循环第三个  ：内层循环打印 2
                外层循环第二次 
                        打印  "外层循环打印" 1
                        内层循环
                            内层循环第一个  ：内层循环打印 0
                            内层循环第二个  ：内层循环打印 1
                            内层循环第三个  ：内层循环打印 2
                外层的第三次循环 
                        打印  "外层循环打印" 2
                        内层循环
                            内层循环第一个  ：内层循环打印 0
                            内层循环第二个  ：内层循环打印 1
                            内层循环第三个  ：内层循环打印 2
                外层循环结束 ，整个循环结束了
        
        
        */



        // for(var i=1;i<=5;i++){
        //     document.write("*")
        // }
        // document.write("<br>");


        // for(var i=1;i<=5;i++){
        //     document.write("*")
        // }
        // document.write("<br>");


        // for(var i=1;i<=5;i++){
        //     document.write("*")
        // }
        // document.write("<br>");


        // for(var i=1;i<=5;i++){
        //     document.write("*")
        // }
        // document.write("<br>");


        //小练习：2个框 一个是输入行 列外一个是输入列 ，要在页面显示对应行和列的 "*"的数量；

        // 获取元素
        var rowEle = document.getElementById("row");
        var colEle = document.getElementById("column");
        var btnEle = document.getElementById("btn");
        btnEle.onclick = function () {
            var row = parseInt(rowEle.value);
            var column = parseInt(colEle.value);
            for (var j = 1; j <= row; j++) {  //控制的行数 
                for (var i = 1; i <= column; i++) {  //控制列数 
                    document.write("*")
                }
                document.write("<br>");
            }

        }


    </script>
</body>

</html>